<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">签到、签退</view>
			<view class="right" @click="getMembers">刷新</view>
		</view>
		<view class="card">
			<view class="title flex-row">
				<view class="name">{{ title }}签到、签退二维码</view>
			</view>
			<view class="code">
				<image :src="src" mode=""></image>
			</view>
			<view style="margin-bottom: 30upx;">
				<view class="tabs flex-row">
					<view @click="getCode('in')" class="tab" :class="{active: type == 'in'}">签到码</view>
					<view @click="getCode('out')" class="tab" :class="{active: type == 'out'}">签退码</view>
				</view>
			</view>
		</view>
		<view class="tip">参会人员（未签到为灰色，签到未签退为蓝色，已签退为绿色，点击刷新按钮展示最新参会人员签到信息）</view>
		<view class="members">
			<view v-for="(item, index) in members" :key="index">
				<view v-if="item.status == 1" class="blue">{{ item.username }}</view>
				<view v-if="item.status == 2" class="green">{{ item.username }}</view>
				<view v-if="item.status == 0">{{ item.username }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { uniIcons },
	data(){
		return {
			meet_id: '',
			title: '',
			src: '',
			type: 'in',
			members: []
		}
	},
	onLoad(option){
		this.meet_id = option.id;
		this.title = option.title;
		this.getCode();
		this.getMembers();
	},
	methods: {
		// 返回
		goBack(){
			uni.navigateBack();
		},
		// 获取二维码
		getCode(type='in'){
			this.type = type;
			this.src =  this.$API.eduSafeMeetingSign + '?meet_id='+this.meet_id+'&type='+type;
		},
		// 获取参会人员
		getMembers(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeMeetingJoinMember,
				data: { meet_id: this.meet_id },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.members = res.data.data;
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	overflow: hidden;
}

.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.members{
	padding: 0 30upx;
	overflow: hidden;
}
.members>view{
	float: left;
	margin: 0 30upx 20upx 0;
}
.members>view view{
	color: #fff;
	font-size: 24upx;
	text-align: center;
	border-radius: 30upx;
	padding: 4upx 30upx;
	background: #999999;
}
.members>view view.blue{
	background: #5F96F2;
}
.members>view view.green{
	background: green;
}

.tip{
	margin: 20upx;
	padding-left: 20upx;
	position: relative;
}
.tip::before{
	content: '';
	width: 6upx;
	height: 28upx;
	background: #5F96F2;
	position: absolute;
	top: 12upx;
	left: 0;
}


.tabs{
	justify-content: space-around;
	border: 2upx solid #5F96F2;
	border-radius: 40upx;
	overflow: hidden;
	margin: 0 auto;
	width: 260upx;
}
.tabs .tab{
	text-align: center;
	font-size: 24upx;
	padding: 4upx 0;
	color: #5F96F2;
	width: 50%;
}
.tabs .tab.active{
	color: #fff;
	background: #5F96F2;
}

.code{
	text-align: center;
}
.code image{
	width: 200upx;
	height: 200upx;
	margin: 20upx 0;
}

/*列表*/
.card{
	background: #fff;
	overflow: hidden;
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
</style>
